<template>
    <div id="login">
        <!-- 主体 -->
        <el-main>
          <!-- 头部 -->
          <el-page-header @back="$router.push('/')" content="用户登录" title="首页" class="header">
          </el-page-header>
            <el-row>
              <!-- 主体内容-左 -->
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                    </div>
                </el-col>
                <!-- 主体内容-右 -->
                <el-col :span="12"><div class="grid-content bg-purple-light">
                  <!-- 登录 -->
                  <div class="form_table">
                    <h2>登 录</h2>
                    <el-form ref="form"
                    label-width="80px"
                    :model="loginForm"
                    :rules="rules"
                    label-position="right"
                    size="medium" >
                      <el-form-item prop="user_email" label="账号：">
                        <el-input
                        v-model="loginForm.user_email"
                        prefix-icon="el-icon-user-solid"
                        placeholder="请输入邮箱地址">
                      </el-input>
                      </el-form-item>
                      <el-form-item prop="user_password" label="密码：">
                        <el-input
                        v-model="loginForm.user_password"
                        type="password"
                        prefix-icon="el-icon-key"
                        placeholder="请输入密码"
                        show-password>
                      </el-input>
                      </el-form-item>
                      <el-form-item prop="code" label="验证码：">
                        <el-input v-model="loginForm.code" placeholder="请输入验证码" prefix-icon >
                          <canvas
                          ref="myCanvas"
                          slot="append"
                          id="myCanvas"
                          :width="canvas_w"
                          :height="canvas_h"
                          @click="getPicCode">
                        </canvas>
                        </el-input>
                      </el-form-item>
                      <el-form-item prop="role" label="角色：" class="role">
                          <el-radio-group v-model="loginForm.role">
                            <el-radio label="1">用户</el-radio>
                            <el-radio label="2">维修员</el-radio>
                          </el-radio-group>
                      </el-form-item>
                      <el-button type="primary" class="login_btn" @click="goLogin" @keyup.enter="goLogin">登录</el-button>
                    </el-form>
                    <span class="el-icon-back" @click="$router.push('/reg')">去注册</span>
                  </div>
                </div>
              </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div class="footer">
            </div>
        </el-footer>

    </div>
</template>

<script>
import { verificaCode } from '@/utils/verifica_Code.js'
import { Message } from 'element-ui'
import { loginService } from '@/api/user'
export default {
  data: () => {
    return {
      canvas_w: 120, // 图形验证码的宽度
      canvas_h: 32, // 图形验证码的高度
      code_pic: '', // 图形验证码
      // 准备表单数据
      loginForm: {
        user_email: '', // 用户邮箱
        user_password: '', // 用户密码
        code: '', // 验证码
        role: '1' // 用户角色
      },
      // 表单验证规则
      rules: {
        user_email: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ], // 用户邮箱
        user_password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[/\S]{6,15}$/, message: '长度在 6 到 15 个非空字符', trigger: 'blur' }], // 用户密码
        code: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }], // 验证码
        role: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      }
    }
  },
  // 这里请求数据
  created () {

  },
  // 这里调用dom
  mounted () {
    this.getPicCode()
  },
  // 方法
  methods: {
    // 获取图形验证码
    getPicCode () {
      this.code_pic = verificaCode('#myCanvas', this.canvas_w, this.canvas_h)
    },
    // 登录
    async goLogin () {
      if (this.loginForm.code.toUpperCase() !== this.code_pic.toUpperCase()) {
        this.getPicCode()
        this.loginForm.code = ''
        return Message.error('验证码错误')
      }
      // TODO1: 请求登录接口
      const res = await loginService(this.loginForm.user_email, this.loginForm.user_password, this.loginForm.role)
      // res.status === 0 ? await Message.success(res.message) : await Message.error(res.message)
      if (res.status !== 0) return
      // 设置token
      if (this.loginForm.role === '1') {
        this.$router.push('/')
        this.$store.commit('userStore/setUserInfo', {
          userId: res.data.userId,
          token: 'Bearer ' + res.data.token
        })
      } else {
        this.$store.commit('maintainerStore/setMaintainerInfo', {
          maintainerId: res.data.userId,
          MAINTAINER_TOKEN: 'Bearer ' + res.data.token
        })
        this.$router.push('/maintainer')
      }
    }
  },
  // 注册组件
  components: {
  }
}
</script>

<style lang="less" scoped>
  #login{
    background-image: linear-gradient(#e66465, #9198e5);
    // background-image: linear-gradient(rgb(35, 124, 212), #85bce0);
    // background:#f0f0f0;
  }
  .header{
    margin-top: 15px;
  }

/deep/ .el-main{
  padding: 0;
  padding-bottom: 0;
}
// 左边
  .bg-purple {
    background:url(../../assets/维护，维修.png) center no-repeat transparent;
  }
  // 右边
  .bg-purple-light {
    display: flex;
    justify-content: center;
    align-items: center;
    .form_table{
      padding: 50px 30px 30px;
      // border: 2px solid #1984cb;
      border-radius: 15px;
      text-align: center;
      // background: rgba(3, 19, 42, 0.2);
      box-shadow: 5px 5px 10px 7px #585858;
      background: transparent;
      h2{
        // color: #555;
        margin-bottom: 10px;
        color: #f1f1f1;
        font-size: 28px;
      }
      .role{
        text-align: left;
       /deep/ .el-radio{
          margin-left: 20px;
        }
      }
      /deep/ .el-input__inner {
        background-color: transparent;
        border: 0px solid #000;
        // transition: all .5s;
      }
      /deep/ .el-input__inner:focus{
        border: 1px solid #ccc;
        // transform: scale(1.1);
        // border-bottom: 1px solid #000;
      }
      /deep/.el-input-group__append canvas {
        padding: 0;
        width: 120px;
        // background-color: transparent;
      }
      .login_btn{
        width: 50%;
        margin: 30px 0;
      }
      .el-icon-back,
      .el-icon-right{
        color: #494b51;
      }
    }
  }
  .grid-content {
    // background-color: red;
    /* 线性渐变 - 从上到下（默认情况下）*/
    // background-image: linear-gradient(#e66465, #9198e5);
    border-radius: 8px;
    min-height: 600px;
  }
  /deep/ .el-footer{
    padding: 100;
    height: 200px;
  }
  .footer{
    font-size: 18px;
    // background-color: skyblue;
  }
</style>
